import React, { Component } from 'react'
import { TabBar } from 'antd-mobile';
// import Item from 'antd-mobile/lib/popover/Item';
import  cookbook from 'assets/images/cookbook.png'

import  cookbookActive from 'assets/images/cookbook-active.png'
import  menu from 'assets/images/menu.png'

import  menuActive from 'assets/images/menu-active.png'

import  location from 'assets/images/location.png'
import  locationActive from 'assets/images/location-active.png'

import  more from 'assets/images/more.png'
import  moreActive from 'assets/images/more-active.png'

import CookBook from 'views/home/cookbook/CookBook'

import Categroy from 'views/home/categroy/Categroy'

import Map from 'views/home/map/Map'

import More from 'views/home/more/More'



 const tabbarlist=[{
     title:'菜谱大全部',
     icon:cookbook,
     iconActive:cookbookActive,
     Component:CookBook,
     id:'cookbook'
 },
 {
    title:'分类',
    icon:menu,
    iconActive:menuActive,
    Component:Categroy,
    id:'categroy'
},
 {
    title:'地图',
    icon:location,
    iconActive:locationActive,
    Component:Map,
    id:'location'
},
 {
    title:'更多',
    icon:more,
    iconActive:moreActive,
    Component:More,
    id:'more'
}]

export default class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
          selectedTab: 'cookbook'
        }
    }
    render() {
        return (
            <div style={ { position: 'fixed', height: '100%',  width: '100%', top: 0 } }>
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#33A3F4"
          barTintColor="white"
          hidden={this.state.hidden}
        >
            {
                tabbarlist.map((item)=>{
                    return (
                        <TabBar.Item
            title={item.title}
            key={item.id}
            icon={<div style={{
              width: '22px',
              height: '22px',
              background: `url(${item.icon}) center center /  21px 21px no-repeat`}}
            />
            }
            selectedIcon={<div style={{
              width: '22px',
              height: '22px',
              background: `url(${item.iconActive}) center center /  21px 21px no-repeat` }}
            />
            }
            selected={this.state.selectedTab === item.id}
            
            onPress={() => {
              this.setState({
                selectedTab: item.id,
              });
            }}
            data-seed="logId"
          >
            {<item.Component></item.Component>}
          </TabBar.Item>
                    )
                })
            }
          

        </TabBar>
      </div>
        )
    }
}
